<template>
<div class="user-list">
	<h1>Element UI Example</h1>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="Tag" name="first">
			<el-tag
				:key="tag"
				v-for="tag in dynamicTags"
				:closable="true"
				:close-transition="false"
				@close="handleClose(tag)">
					{{tag}}
			</el-tag>
			<el-input
				class="input-new-tag"
				v-if="inputVisible"
				v-model="inputValue"
				ref="saveTagInput"
				size="mini"
				@keyup.enter.native="handleInputConfirm"
				@blur="handleInputConfirm">
			</el-input>
			<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
		</el-tab-pane>
		<el-tab-pane label="两列选择" name="second">
			<el-transfer v-model="value1" :data="data"></el-transfer>
		</el-tab-pane>
		<el-tab-pane label="表格" name="third">
			<el-table
				:data="tableData3" border style="width: 100%" height="250">
				<el-table-column fixed prop="date" label="日期" width="150">
				</el-table-column>
				<el-table-column
					prop="name"
					label="姓名"
					width="120">
				</el-table-column>
				<el-table-column
					prop="province"
					label="省份"
					width="120">
				</el-table-column>
				<el-table-column
					prop="city"
					label="市区"
					width="120">
				</el-table-column>
				<el-table-column
					prop="address"
					label="地址"
					width="300">
				</el-table-column>
				<el-table-column
					prop="zip"
					label="邮编"
					width="120">
				</el-table-column>
			</el-table>
		</el-tab-pane>
		<el-tab-pane label="MessageBox" name="fourth">
			<el-button type="text" @click="open">点击打开 Message Box</el-button>
			<el-button type="text" @click="open2">点击打开 确认Message Box</el-button>
		</el-tab-pane>
	</el-tabs>
	
</div>
</template>

<script>
export default {
	name: 'user-list',
	data () {
		const generateData = _ => {
			const data = [];
			for (let i = 1; i <= 15; i++) {
				data.push({
					key: i,
					label: `备选项 ${i}`,
					disabled: i % 4 === 0
				});
			}
			return data;
		};
		return {
			data: generateData(),
			value1: [1, 4],
			activeName: 'second',
			dynamicTags: ['标签一', '标签二', '标签三'],
			inputVisible: false,
			inputValue: '',
			tableData3: [{
				date: '2016-05-03',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}, {
				date: '2016-05-02',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}, {
				date: '2016-05-04',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}, {
				date: '2016-05-01',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}, {
				date: '2016-05-08',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}, {
				date: '2016-05-06',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}, {
				date: '2016-05-07',
				name: '王小虎',
				province: '上海',
				city: '普陀区',
				address: '上海市普陀区金沙江路 1518 弄',
				zip: 200333
			}]
		};
	},
	methods: {
		handleClick (tab, event) {
			console.log(tab, event);
		},
		handleClose (tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
		},

		showInput () {
			this.inputVisible = true;
			this.$nextTick(_ => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},

		handleInputConfirm () {
			let inputValue = this.inputValue;
			if (inputValue) {
				this.dynamicTags.push(inputValue);
			}
			this.inputVisible = false;
			this.inputValue = '';
		},

		open () {
			this.$alert('这是一段内容', '标题名称', {
				confirmButtonText: '确定',
				callback: action => {
					this.$message({
						type: 'info',
						message: `action: ${action}`
					});
				}
			});
		},

		open2 () {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		}
	},
	created: function () {
		console.log('created user-list....');
	},
	mounted: function () {
		console.log('mounted user-list....');

	},
	beforeRouteEnter (to, from, next) {
		console.log('enter user-list....');
		next();
	},
	beforeRouteUpdate (to, from, next) {
		console.log('update user-list....');
		next();
	},
	beforeRouteLeave (to, from, next) {
		console.log('leave user-list....');
		next();
	}
};
</script>
